<style>
    .Zi--EyeSlash {
        display: none;
    }
    
    .Login-options {
        margin-top: 12px;
        height: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        background: #fff;
    }
    
    .Button--link,
    .Button--plain {
        height: auto;
        padding: 0;
        line-height: inherit;
        background-color: transparent;
        border: none;
        border-radius: 0;
        color: #8590a6;
        cursor: pointer;
    }
</style>
<php>$islogin = !($_GET['reg'] == 'true');</php>
<div class="main">
    <div class="main_bg">
        <div class="loginBox">
            <div class="my-logo">
                <a href="/"><img src="/Public/common/img/logo_06.png" width="130"></a>
            </div>
            <!-- signContent -->
            <div class="signContent">
                <div class="signContainer">
                    <form action="" class="loginForm" id="form_key" data-module="smsFrom" onsubmit="return checkForm()">
                        <!-- tab -->
                        <div class="tabBox">
                            <div class="tabBoxSwitch">
                                <ul class="tabBoxSwitchUl">
                                    <if condition="$islogin">
                                        <li class="tab-active" data-id="0">账号登录</li>
                                        <li data-id="1">用户注册</li>
                                        <else/>
                                        <li data-id="0">账号登录</li>
                                        <li class="tab-active" data-id="1">用户注册</li>
                                    </if>
                                </ul>
                                <div class="ercode_tab swicth-ercode" style="width:100px;top:19px;font-size: 16px;">
                                    <a href="/"><i class="layui-icon layui-icon-return"></i> 返回主页</a>
                                </div>
                            </div>
                        </div>
                        <!-- tabContent -->
                        <div class="tabContent">
                            <!-- tabContentAccount -->
                            <div class="tabcont tabContentAccount <if condition='$islogin'>active</if>">
                                <div class="tabcontent">
                                    <div class="phoneInputGroup">
                                        <label for="" class="inputLabel phoneLabel">
                                            <input type="text" value="" name="" id="accountUser"
                                                class="inputStyle accountUsername" placeholder="手机号或账号"
                                                autocomplete="off">
                                        </label>
                                    </div>
                                </div>
                                <div class="tabcontent">
                                    <div class="phoneInputGroup">
                                        <label for="" class="inputLabel phoneLabel">
                                            <input type="password" maxlength="30" value="" name="" id="accountpwd"
                                                class="inputStyle accountPwd" placeholder="密码" autocomplete="off">
                                        </label>
                                    </div>
                                    <button tabindex="-1" type="button" data-id="accountpwd" class="button SignFlow-switchPassword">
                                        <span style="display: inline-flex; align-items: center;">​
                                            <svg class="Zi Zi--Eye Button-zi" fill="currentColor" viewBox="0 0 24 24" width="1.2em" height="1.2em">
                                                <path
                                                    d="M1 11.5C1 15 7 19 12 19s11-4 11-7.5S17 4 12 4 1 8 1 11.5zm11 5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm-3-5c0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3-3 1.34-3 3z"
                                                    fill-rule="evenodd">
                                                </path>
                                            </svg>
                                            <svg class="Zi Zi--EyeSlash Button-zi" fill="currentColor" viewBox="0 0 24 24" width="1.2em" height="1.2em">
                                                <path d="M17.007 11.504c0 .65-.13 1.26-.36 1.83l3 3.073S23 14.136 23 11.504C23 8.008 17.255 4 11.995 4c-1.4 0-2.741.25-3.982.701l2.161 2.16c.57-.23 1.18-.36 1.831-.36a5.004 5.004 0 0 1 5.002 5.003zM2.57 4.342l2.067 2.075C3.499 7.258 1 9.119 1 11.504c0 3.336 5.79 7.503 11.005 7.503 1.55 0 3.031-.3 4.382-.84l.42.42 2.125 2.118s.782.571 1.314 0-.074-1.305-.074-1.305L3.955 3.183s-.76-.742-1.385-.19c-.626.554 0 1.35 0 1.35zm4.963 4.96l1.55 1.552c-.05.21-.08.43-.08.65 0 1.66 1.341 3.001 3.002 3.001.22 0 .44-.03.65-.08l1.551 1.551c-.67.33-1.41.53-2.2.53a5.004 5.004 0 0 1-5.003-5.002c0-.79.2-1.53.53-2.201zm4.312-.78l3.151 3.152.02-.16c0-1.66-1.34-3.001-3.001-3.001l-.17.01z" opacity=".9" fill-rule="evenodd"></path>
                                            </svg>
                                        </span>
                                    </button>
                                </div>
                                <div class="Login-options">
                                    <button type="button" class="Button Login-switchType Button--plain"></button>
                                    <button type="button" class="Button Login-cannotLogin Button--plain" onclick="location.href='/user/findpwd'">忘记密码？</button>
                                </div>
                                <div class="tabcontent" style="border-bottom:0">
                                    <div class="verify-wrap" id="verify-login-wrap"></div>
                                    <input type="hidden" id="code-login" value="" />
                                </div>
                            </div>

                            <!-- tabContentPhone -->
                            <div class="tabcont  tabContentPhone <if condition='!$islogin'>active</if>">
                                <div class="tabcontent">
                                    <div class="phoneInputGroup">
                                        <label for="" class="inputLabel phoneLabel">
                                            <input type="text" value="" name="" id="username"
                                                class="inputStyle accountUsername2" placeholder="设置账号"
                                                autocomplete="off">
                                        </label>
                                    </div>
                                </div>
                                <div class="tabcontent">
                                    <div class="phoneInputGroup">
                                        <label for="" class="inputLabel phoneLabel">
                                            <input type="password" maxlength="30" value="" name="" id="password"
                                                class="inputStyle accountPwd2" placeholder="设置密码" autocomplete="off">
                                        </label>
                                    </div>
                                    <button tabindex="-1" type="button" data-id="password" class="button SignFlow-switchPassword">
                                        <span style="display: inline-flex; align-items: center;">​
                                            <svg class="Zi Zi--Eye Button-zi" fill="currentColor"
                                                viewBox="0 0 24 24" width="1.2em" height="1.2em">
                                                <path
                                                    d="M1 11.5C1 15 7 19 12 19s11-4 11-7.5S17 4 12 4 1 8 1 11.5zm11 5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm-3-5c0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3-3 1.34-3 3z"
                                                    fill-rule="evenodd">
                                                </path>
                                            </svg>
                                            <svg class="Zi Zi--EyeSlash Button-zi" fill="currentColor" viewBox="0 0 24 24" width="1.2em" height="1.2em">
                                                <path d="M17.007 11.504c0 .65-.13 1.26-.36 1.83l3 3.073S23 14.136 23 11.504C23 8.008 17.255 4 11.995 4c-1.4 0-2.741.25-3.982.701l2.161 2.16c.57-.23 1.18-.36 1.831-.36a5.004 5.004 0 0 1 5.002 5.003zM2.57 4.342l2.067 2.075C3.499 7.258 1 9.119 1 11.504c0 3.336 5.79 7.503 11.005 7.503 1.55 0 3.031-.3 4.382-.84l.42.42 2.125 2.118s.782.571 1.314 0-.074-1.305-.074-1.305L3.955 3.183s-.76-.742-1.385-.19c-.626.554 0 1.35 0 1.35zm4.963 4.96l1.55 1.552c-.05.21-.08.43-.08.65 0 1.66 1.341 3.001 3.002 3.001.22 0 .44-.03.65-.08l1.551 1.551c-.67.33-1.41.53-2.2.53a5.004 5.004 0 0 1-5.003-5.002c0-.79.2-1.53.53-2.201zm4.312-.78l3.151 3.152.02-.16c0-1.66-1.34-3.001-3.001-3.001l-.17.01z" opacity=".9" fill-rule="evenodd"></path>
                                            </svg>
                                        </span>
                                    </button>
                                </div>
                                <div class="tabcontent">
                                    <div class="phoneBox">
                                        <div class="phoneGroup">
                                            <button class="phone-btn selectBtn" type="button" data-type="selected">
                                                <span>中国 +86</span>
                                                <svg class="Zi--Select Select-arrow" fill="currentColor"
                                                    viewBox="0 0 24 24">
                                                    <path
                                                        d="M12 16.183l2.716-2.966a.757.757 0 0 1 1.064.001.738.738 0 0 1 0 1.052l-3.247 3.512a.758.758 0 0 1-1.064 0L8.22 14.27a.738.738 0 0 1 0-1.052.758.758 0 0 1 1.063 0L12 16.183zm0-9.365L9.284 9.782a.758.758 0 0 1-1.064 0 .738.738 0 0 1 0-1.052l3.248-3.512a.758.758 0 0 1 1.065 0L15.78 8.73a.738.738 0 0 1 0 1.052.757.757 0 0 1-1.063.001L12 6.818z"
                                                        fill-rule="evenodd"></path>
                                                </svg>
                                            </button>
                                        </div>
                                        <div class="selectConentent">
                                            <div class="selectOptions">
                                            </div>
                                        </div>
                                    </div>
                                    <span class="line-show"></span>
                                    <div class="phoneInputGroup" style="width: auto;">
                                        <label for="" class="inputLabel phoneLabel">
                                            <input type="text" value="" name="" id="phoneInput"
                                                class="inputStyle phoneInput" placeholder="手机号" autocomplete="off">
                                        </label>
                                    </div>
                                </div>
                                <div class="tabcontent" style="display:none;" id="sendCode">
                                    <div class="phoneInputGroup">
                                        <label for="" class="inputLabel">
                                            <input type="text" maxlength="6" value="" name="" id="msgInput"
                                                class="inputStyle msgInput" placeholder="输入 6 位短信验证码"
                                                autocomplete="off">
                                        </label>
                                    </div>
                                    <div class="phoneGroup">
                                        <button class="phone-btn msgBtn" type="button">
                                            获取短信验证码
                                        </button>
                                    </div>
                                </div>
                                <div class="tabcontent" style="border-bottom:0">
                                    <div class="verify-wrap" id="verify-wrap"></div>
                                    <input type="hidden" id="code" value="" />
                                </div>
                            </div>
                        </div>
                        <!-- loginbox -->
                        <div class="login_box">
                        </div>
                        <button id="submit" type="submit" class="button fromSubmit" data-type="<if condition='$islogin'>smsSubmit<else/>accountSubmit</if>"><if condition='$islogin'>登录<else/>注册</if></button>
                        <!-- tips -->
                        <div class="SignContainer-tip">
                            <div>
                                <div>未注册手机验证后自动登录，注册即代表同意<a href="javascript:openArticle('溪语编程使用协议',100014);">《溪语编程使用协议》</a><a href="javascript:openArticle('隐私保护指引',100013);">《隐私保护指引》</a></div>
                            </div>
                        </div>
                    </form>
                    <!-- ercodeSgin -->
                    <div class="ercodeSignBox">
                        <div class="ercode_tab switch-input">
                            <svg width="52" height="52" xmlns:xlink="http://www.w3.org/1999/xlink" fill="currentColor">
                                <defs>
                                    <path id="id-14580708-a" d="M0 0h48a4 4 0 0 1 4 4v48L0 0z"></path>
                                </defs>
                                <g fill="none" fill-rule="evenodd">
                                    <mask id="id-14580708-b" fill="#fff">
                                        <use xlink:href="#id-14580708-a"></use>
                                    </mask>
                                    <use fill="#0084FF" xlink:href="#id-14580708-a"></use>
                                    <path fill="#FFF"
                                        d="M22.125 4h13.75A4.125 4.125 0 0 1 40 8.125v27.75A4.125 4.125 0 0 1 35.875 40h-13.75A4.125 4.125 0 0 1 18 35.875V8.125A4.125 4.125 0 0 1 22.125 4zm6.938 34.222c1.139 0 2.062-.945 2.062-2.11 0-1.167-.923-2.112-2.063-2.112-1.139 0-2.062.945-2.062 2.111 0 1.166.923 2.111 2.063 2.111zM21 8.333v24h16v-24H21z"
                                        mask="url(#id-14580708-b)"></path>
                                    <g mask="url(#id-14580708-b)">
                                        <path fill="#FFF"
                                            d="M46.996 15.482L39 19.064l-7.996-3.582A1.6 1.6 0 0 1 32.6 14h12.8a1.6 1.6 0 0 1 1.596 1.482zM47 16.646V24.4a1.6 1.6 0 0 1-1.6 1.6H32.6a1.6 1.6 0 0 1-1.6-1.6v-7.754l8 3.584 8-3.584z">
                                        </path>
                                        <path fill="#0084FF" d="M31 15.483v1.17l8 3.577 8-3.577v-1.17l-8 3.581z"
                                            fill-rule="nonzero"></path>
                                    </g>
                                </g>
                            </svg>
                        </div>
                        <!-- ercodeConent -->
                        <div class="ercodeContent">
                            <div class="Qrcode-title">扫码登录</div>
                            <div class="ercodeBox">
                                <div class="Qrcode-img" id="qrcode">
                                    <!-- <img width="150" height="150" src="../img/image.png" alt="二维码"> -->
                                </div>
                                <p>打开<a href="#" target="_blank" rel="noopener noreferrer">
                                        溪语编程小程序</a></p>
                                <p>在「我的」页面右上角打开扫一扫</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!--  -->
            <div class="css-1hmxk26"></div>
            <!-- signSocial -->
            <div class="footSign signSocial">
                <span class="social-title">社交帐号登录</span>
                <span class="Login-socialButtonGroup">
                    <button type="button" class="button Login-socialButton" onclick="need_dev()">
                        <svg class="Zi Zi--WeChat Login-socialIcon" fill="#60c84d" viewBox="0 0 24 24" width="20"
                            height="20">
                            <path
                                d="M2.224 21.667s4.24-1.825 4.788-2.056C15.029 23.141 22 17.714 22 11.898 22 6.984 17.523 3 12 3S2 6.984 2 11.898c0 1.86.64 3.585 1.737 5.013-.274.833-1.513 4.756-1.513 4.756zm5.943-9.707c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272zm7.583 0c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272z"
                                fill-rule="evenodd"></path>
                        </svg>
                        微信
                    </button>
                    <button type="button" class="button Login-socialButton " onclick="need_dev()">
                        <svg class="Zi Zi--QQ Login-socialIcon" fill="#50c8fd" viewBox="0 0 24 24" width="20"
                            height="20">
                            <path
                                d="M12.003 2c-2.265 0-6.29 1.364-6.29 7.325v1.195S3.55 14.96 3.55 17.474c0 .665.17 1.025.281 1.025.114 0 .902-.484 1.748-2.072 0 0-.18 2.197 1.904 3.967 0 0-1.77.495-1.77 1.182 0 .686 4.078.43 6.29 0 2.239.425 6.287.687 6.287 0 0-.688-1.768-1.182-1.768-1.182 2.085-1.77 1.905-3.967 1.905-3.967.845 1.588 1.634 2.072 1.746 2.072.111 0 .283-.36.283-1.025 0-2.514-2.166-6.954-2.166-6.954V9.325C18.29 3.364 14.268 2 12.003 2z"
                                fill-rule="evenodd">
                            </path>
                        </svg>
                        QQ
                    </button>
                </span>
            </div>
        </div>
    </div>
</div>
<script src="/Public/common/js/qrcode.js"></script>
<script src="/Public/common/js/login.js"></script>
<script src="/Public/common/js/slideVerify.js"></script>
<script>
    var token = '<?php echo create_token(time());?>';
    var slideVerifyLogin;
    var slideVerify;
    $(function() {
        var SlideVerifyPlug = window.slideVerifyPlug;
        slideVerify = new SlideVerifyPlug('#verify-wrap', {
            wrapWidth: '350',
            initText: '请向右滑动滑块',
            sucessText: '验证通过',
            getSuccessState: function(res) {
                // console.log(res);
                var time = '<?php $curTime = time(); echo $curTime; ?>';
                var token = '<?php echo create_token($curTime);?>'
                if (res) {
                    // var ii = layer.msg('Loading...', {
                    //     icon: 16,
                    //     time: 10000
                    // });
                    $.get('/api/sms/create_code', {
                        token: token,
                        token_time: time
                    }, function(ret) {
                        // layer.close(ii);
                        if (ret.status) {
                            $('#code').val(ret.data);
                            $('#sendCode').show();
                        } else {
                            layer.msg(ret.info);
                        }
                    });
                }
            }
        });

        slideVerifyLogin = new SlideVerifyPlug('#verify-login-wrap', {
            wrapWidth: '350',
            initText: '请向右滑动滑块',
            sucessText: '验证通过',
            getSuccessState: function(res) {
                // console.log(res);
                var time = '<?php $curTime = time(); echo $curTime; ?>';
                var token = '<?php echo create_token($curTime);?>'
                if (res) {
                    // var ii = layer.msg('Loading...', {
                    //     icon: 16,
                    //     time: 10000
                    // });
                    $.get('/user/api/create_login_code', {
                        token: token,
                        token_time: time
                    }, function(ret) {
                        // layer.close(ii);
                        if (ret.status) {
                            $('#code-login').val(ret.data);
                        } else {
                            layer.msg(ret.info);
                        }
                    });
                }
            }
        });

        $("#resetBtn").on('click', function() {
            $('.value').html('false')
            $('#resetBtn').addClass('prohibit')
            slideVerify.resetVerify(); //可以重置 插件 回到初始状态 
        })
        $('#resetBtn').addClass('prohibit')
    });

    function resetCode() {
        slideVerify.resetVerify(); //可以重置 插件 回到初始状态 
    }

    function checkForm() {
        layui.use(['jquery', 'layer'], function() {
            var submitType = $('#submit').html();
            if (submitType == '登录') {
                var username = $('#accountUser').val();
                var password = $('#accountpwd').val();
                var code = $('#code-login').val();
                if (username == '') {
                    $('#accountUser').focus();
                    return false;
                }
                if (password.length < 6) {
                    layer.msg('密码长度为8~30位');
                    $('#accountpwd').focus();
                    return false;
                }
                if (code == '') {
                    layer.msg('请先完成人机验证~');
                    return false;
                }
                var ii = layer.msg('Loading...', {
                    icon: 16,
                    time: 100000
                });
                $.post('/user/api/login', {
                    username: username,
                    password: password,
                    code: code
                }, function(ret) {
                    layer.close(ii);
                    if (ret.status) {
                        layer.msg(ret.info, {
                            icon: 1,
                            time: 1000
                        }, function() {
                            if (ret.url) {
                                location.href = ret.url;
                            } else {
                                location.href = "/";
                            }
                        });
                    } else {
                        layer.msg(ret.info);
                        slideVerifyLogin.resetVerify();
                    }
                });
            } else {
                var username = $('#username').val();
                var password = $('#password').val();
                var mobile = $('#phoneInput').val();
                var code = $('#msgInput').val();
                if (username == '') {
                    $('#username').focus();
                    return false;
                }
                var pwdLength = parseInt("<?php echo C('password_length'); ?>");
                if (password.length < pwdLength) {
                    layer.msg('密码长度不能小于' + pwdLength);
                    $('#password').focus();
                    return false;
                }

                if (!checkMobile(mobile)) {
                    layer.msg('手机号格式错误~');
                    $('#phoneInput').focus();
                    return false;
                }
                if (code.length < 6) {
                    if (code.length == 0) {
                        layer.msg('短信验证码不能为空');
                    } else {
                        layer.msg('短信验证码为6位');
                    }
                    $('#msgInput').focus();
                    return false;
                }
                var ii = layer.msg('Loading...', {
                    icon: 16,
                    time: 100000
                });
                $.post('/user/api/reg', {
                    username: username,
                    password: password,
                    mobile: mobile,
                    code: code
                }, function(ret) {
                    layer.close(ii);
                    if (ret.status) {
                        layer.msg(ret.info, {
                            icon: 1,
                            time: 1000
                        }, function() {
                            if (ret.url) {
                                location.href = ret.url;
                            } else {
                                location.href = "/";
                            }
                        });
                    } else {
                        layer.msg(ret.info);
                    }
                });
            }
        });
        return false;
    }

    function checkMobile(mobile = '') {
        var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!myreg.test(mobile)) {
            // console.log('手机号格式不正确')
            return false;
        } else {
            // console.log('手机号格式正确')
            return true;
        }
    }

    function openArticle(title, id) {
        layui.use('layer', function() {
            var layer = layui.layer;
            layer.open({
                title: title,
                type: 2,
                maxWidth: '90%',
                maxHeight: '90%',
                area: ['90%', '90%'],
                shadeClose: true,
                content: '/article/detail?id=' + id
            });
        });
    }

    function need_dev() {
        layui.use(['layer'], function() {
            layer.msg("待开发");
        });
    }
</script>